<template>
  <el-container class="account-information-container">
    <div class="account-information-main">
      <div class="aside">
        <el-card class="aside-card">
          <el-row
            type="flex"
            justify="row-bg"
            class="account-information-avatar-nickName"
          >
            <el-col :span="10" class="avatar">
              <!-- 头像，以及展示失败的情况使用user代替 -->
              <el-avatar :size="80" :src="userPartInfo.avatarUrl" fit="cover"
                >User</el-avatar
              >
            </el-col>
            <!-- nickName垂直居中 -->
            <el-col :span="14" class="nickName">
              <!-- 文字从左到右，nickName太长超出隐藏 -->
              <div class="nickName-text">
                {{ userPartInfo.nickName }}
              </div></el-col
            >
          </el-row>
          <el-row class="account-information-menu">
            <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              text-color="black"
              active-text-color="#6495ED"
              @select="handleMenuSelect"
            >
              <el-menu-item index="1">
                <i class="el-icon-user-solid"></i>
                <span slot="title">个人资料</span>
              </el-menu-item>
              <el-menu-item index="2">
                <i class="el-icon-s-tools"></i>
                <span slot="title">账号设置</span>
              </el-menu-item>
            </el-menu>
          </el-row>
        </el-card>
      </div>
      <div class="main">
        <!-- 下面为各子页面，个人资料、账号设置等等 -->
        <router-view></router-view>
      </div>
    </div>
  </el-container>
</template>
  
  <script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
@Component({
  name: "newAccountInfor",
})
export default class newAccountInfor extends Vue {
  // 用户信息
  userPartInfo: { nickName: String; avatarUrl: String } = {
    nickName: this.$store.state.nickName || "User",
    avatarUrl: this.$store.state.avatarUrl || "",
  };
  @Watch("$store.state.avatarUrl", { immediate: true })
  onAvatarUrlChange(newVal: string, oldVal: string): void {
    this.userPartInfo.avatarUrl = newVal;
  }
  activeIndex: string = "1";
  routerSet: { [key: string]: string } = {
    "1": "/personal-data",
    "2": "/account-setting",
  };
  // 处理左侧菜单选中,选中后需要跳转到对应的页面
  handleMenuSelect(index: string, indexPath?: string): void {
    this.activeIndex = index;
    if (this.isNotCurrentRoute(this.$route.path, this.routerSet[index])) {
      this.$router.push({
        path: "/accountInformation" + this.routerSet[index],
      });
    }
  }
  // 判断当前路由与目标路由是否相同
  isNotCurrentRoute(
    sourcePath: string,
    targetPath: string,
    basePath = "/accountInformation"
  ): boolean {
    return sourcePath !== basePath + targetPath;
  }

  // 挂载时定位到指定的页面
  mounted(): void {
    // 调用一次跳转方法
    this.handleMenuSelect(this.activeIndex);
  }
}
</script>
  
  <style lang="scss" scoped>
.account-information-container {
  display: flex;
  justify-content: center;
  width: 1370px;
  margin: 0 auto;
  //   height: auto;

  .account-information-main {
    display: flex;
    justify-content: center;
    .aside {
      // background-color: #d3dce6;
      color: #333;
      display: flex;
      justify-content: center;
      height: 500px;
      width: 290px;
      // 设置min-width是为了防止页面过小时，页面内容挤在一起
      // min-width: 380px;
      .aside-card {
        width: 280px;
        height: 480px;
        .account-information-avatar-nickName {
          background-color: #e3ecf6;
          height: 90px;
          .avatar {
            // 头像居中
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .nickName {
            display: flex;
            align-items: center;
            .nickName-text {
              // nickName太长超出隐藏
              width: 100%;
              overflow: hidden;
              text-align: left;
              font-size: 16px;
              font-weight: 700;
            }
          }
        }
        .account-information-menu {
          ::v-deep(.el-menu-item) {
            font-size: 16px;
          }
        }
      }
    }
    .main {
      // background-color: #e9eef3;
      color: #333;
      display: flex;
      justify-content: center;
      padding: 0px 5px 10px 5px;
      width: 1050px;
      // 显示内容适配
      height: auto;
    }
  }
}
</style>